<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米商城之下拉商品</title>
        <style type="text/css">
            .outer{
                width: 1226px;
                margin: 50px auto;
            }

            .title{
                width: 80px;
                height: 20px;
                user-select:none ;
                cursor: pointer;
            }
            .product{
                width: 100%;
                height: 0px;
                border-top: 1px solid black;
                margin-top: 50px;
                overflow: hidden;
                transition: all 0.5s;
            }
            .title:hover{
                color: orange;
            }
            .title:hover + .product{
                transition: all 0.5s;
               height: 201px;
            }
            .first{
                  width: 204px;
                  height: 201px;
                  float: left;
              }

            .figure{
                width: 160px;
                height: 110px;
                margin: 20px auto;
            }
            .content {
                font-size: 14px;
                font-weight: 400;
                color: #333;
                text-align: center;
                margin-top: 20px;
                margin-bottom: 0px;
            }
            .price{
                margin: 0 10px 14px;
                text-align: center;
                color: #ff6700;
            }

        </style>
    </head>
    <body>
        <div class="outer">
            <div class="title">小米手机</div>
            <div class="product" >
                <div class="first">
                    <a>
                        <div class="figure">
                            <img src="xiaomi10pro.webp" width="160px" height="110px">
                        </div>
                        <div class="content">小米10 Pro</div>
                        <p class="price">4999元起</p>
                    </a>
                </div>
                <div class="first">
                    <a>
                        <div class="figure">
                            <img src="xiaomi10.webp" width="160px" height="110px">
                        </div>
                        <div class="content">小米10</div>
                        <p class="price">3999元起</p>
                    </a>
                </div>

                <div class="first">
                    <a>
                        <div class="figure">
                            <img src="xiaomicc9pro.webp" width="160px" height="110px">
                        </div>
                        <div class="content">小米cc 9 Pro</div>
                        <p class="price">2599元起</p>
                    </a>
                </div>

                <div class="first">
                    <a>
                        <div class="figure">
                            <img src="xiaomi9pro.webp" width="160px" height="110px">
                        </div>
                        <div class="content">小米9 Pro 5G</div>
                        <p class="price">3699元起</p>
                    </a>
                </div>

                <div class="first">
                    <a>
                        <div class="figure">
                            <img src="xiaomicc9.png" width="160px" height="110px">
                        </div>
                        <div class="content">小米cc9</div>
                        <p class="price">1499元起</p>
                    </a>
                </div>
                <div class="first">
                    <a>
                        <div class="figure">
                            <img src="xiaomicc9e.png" width="160px" height="110px">
                        </div>
                        <div class="content">小米cc9e</div>
                        <p class="price">1299元起</p>
                    </a>
                </div>

            </div>

        </div>

    </body>
</html>